<template>
	<view class="uni-navbar" :class="{'uni-navbar-top':isFixed}">
		<view class="uni-navbar-view" :style="{'background-color': backgroundColor}" :class="{'uni-navbar-fixed':isFixed}">
			<status-bar v-if="insertStatusBar" backgroundColor="#1296db"></status-bar>
			<view class="uni-navbar-header"  :style="{'color': color, 'font-size': fontSize}">
				<!--左边-->
				<view @click="onClickLeft">
					<view v-if="leftText">{{leftText}}</view>
					<icon-bar v-if="leftIcon" :name="leftIcon" :size='fontSize'></icon-bar>
					<slot name="left"></slot>
				</view>
				<!-- 中间 -->
				<view class="uni-navbar-view">
					<view v-if="title">{{title}}</view>
					<slot name="center"></slot>
				</view>
				<!-- 右边 -->
				<view @click="onClickRight">
					<view v-if="rightText">{{rightText}}</view>
					<icon-bar v-if="rightIcon" :name="rightIcon" :size='fontSize'></icon-bar>
					<slot name='right'></slot>
				</view>	
			</view>	
		</view>
	</view>
</template>
<script>
	export default {
		name: 'UniNavBar',
		title: '导航栏',
		props: {
			/**标题**/
			title: {
				type: String,
				default: ''
			},
			/**左侧文本**/
			leftText: {
				type: String,
				default: ''
			},
			/**左侧icon**/
			leftIcon: {
				type: String,
				default: ''
			},
			/**左侧事件**/
			onClickLeft: {
				type: Function,
				default: () => {}
			},
			/**右侧文本**/
			rightText: {
				type: String,
				default: ''
			},
			/**右侧icon**/
			rightIcon: {
				type: String,
				default: ''
			},
			/**右侧事件**/
			onClickRight: {
				type: Function,
				default: () => {}
			},
			/**背景色**/
			backgroundColor: {
				type: String,
				default: ''
			},
			/**字体和图标颜色**/
			color: {
				type: String,
				default: ''
			},
			/**字体大小**/
			size: {
				type: [String, Number],
				default: 32
			},
			/**是否固定在顶部**/
			fixed: {
				type: [Boolean, String],
				default: false
			},
			/**是否包含状态栏,默认在顶部时包含**/
			statusBar: {
				type: [Boolean, String],
				default: ''
			},
		},
		computed: {
			isFixed() {
				return String(this.fixed) === 'true'
			},
			insertStatusBar() {
				switch (String(this.statusBar)) {
				    case 'true':
				        return true
				    case 'false':
				        return false
				    default:
				        return this.isFixed
				}
			},
			fontSize() {
				return typeof this.size === 'number'?`${this.size}rpx`:this.size
			}
		},
		data() {
			return {
			};
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	.uni-navbar{
		width: 100%;
		overflow: hidden;
		&.uni-navbar-top{
			padding-top: 80upx;
		}
		.uni-navbar-view{
			width: 100%;
		}
		.uni-navbar-fixed{
			position:fixed;
			z-index: 100;
			top: 0;
		}
		.uni-navbar-header{
			width: 100%;
			height: 80upx;
			padding: 0 20upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.uni-navbar-view{
			flex: 1;
			width: 100%;
			padding: 0 20upx;
			box-sizing: border-box;
		}
	}
</style>
